<template>
    <div class="recommend">
        <scroll class="recommend-content" ref="scroll" :data="discList">
            <div>
            <div class="slider-wrapper" v-if="recommends.length">
            <slider>
                <div  v-for="(item,i) in recommends" :key="i">
                    <a :href="item.linkUrl">
                        <img :src="item.picUrl" alt="this is a img" @load="loadIamge">
                    </a>
                </div>
            </slider>
            </div>
            <div class="recommend-list">
                <h1 class="list-title">热门歌单推荐</h1>
                <ul>
                    <li v-for="(item,i)  in discList" :key="i" class="item">
                        <div class="icon">
                            <img v-lazy="item.imgurl" width="60px" height="60px" alt="">
                        </div>
                        <div class="text">
                            <h2 class="name" v-html="item.creator.name"></h2>
                            <span class="desc" v-html="item.dissname"></span>
                        </div>
                    </li>
                </ul>
            </div>
            </div>
            <div class="loading-container" v-show="!discList.length">
                <loading></loading>
            </div>
        </scroll>
    </div>
</template>

<script>
import Slider from 'base/slider/slider'
import {getRecommend,getDiscList} from 'api/recommend'
import {ERR_OK} from 'api/config'
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
export default {
  data(){
      return{
        recommends:[],
        discList:[]
      }
  },
  created () {
    this._getRecommend()
    this._getDiscList()
  },
  methods: {
    _getRecommend () {
      getRecommend().then((res) => {
        if (res.code === ERR_OK) {
          this.recommends=res.data.slider
          console.log(res.data.slider)
        }
      })
    },
    _getDiscList(){
      let data =  getDiscList().then((res) => {
        if(res.code === ERR_OK){
          this.discList = res.data.list
        }
      })
    },
    loadIamge(){
      if(!this.checkLoaded){
        this.$refs.scroll.refresh()
        this.checkLoaded = true
      }
    }
  },
  components: {
    Slider,
    Scroll,
    Loading
  }
}
</script>
<style lang="stylus" scoped>
    @import "~common/stylus/variable"
    .recommend
        position: fixed
        width: 100%
        top: 88px
        bottom: 0
        .recommend-content
            height: 100%
            overflow hidden
            .slider-wrapper
                position: relative
                width: 100%
                overflow hidden
            .recommend-list
                .list-title
                    height: 65px
                    line-height: 65px
                    text-align: center
                    font-size: $font-size-medium
                    color: $color-theme
                .item
                    display flex
                    box-sizing: border-box
                    align-items: center
                    padding 0 20px 20px 20px
                    .icon
                        flex: 0 0 60px
                        width: 60px
                        padding-right:20px
                    .text
                        display: flex
                        flex-direction: column
                        justify-content: center
                        flex: 1
                        line-height: 20px
                        overflow: hidden
                        font-size: $font-size-medium
                        .name
                            margin-bottom: 10px
                            color: $color-text
                        .desc
                            color: $color-text-d
            .loading-container
                position: absolute
                width: 100%
                top: 50%
                transform: translateY(-50%)
</style>
